<template>
  <div>
    <el-upload
      ref="upload"
      class="avatar-uploader"
      :action="action"
      :headers="headers"
      :limit="limit"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      :file-list="fileList"
      :multiple="multiple"
      list-type="picture-card"
    >
      <i slot="default" class="el-icon-plus attach-uploader-icon" />
    </el-upload>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" append-to-body fullscreen>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store'
export default {
  name: 'AttachFileUpload',
  props: {
    attachFiles: {
      type: Array,
      default() {
        return []
      }
    },
    multiple: {
      type: Boolean,
      default() {
        return true
      }
    },
    limit: {
      type: Number,
      default() {
        return 5
      }
    }
  },
  data() {
    return {
      action: process.env.VUE_APP_BLOB_UPLOAD,
      headers: {},
      dialogImageUrl: '',
      dialogTitle: '',
      dialogVisible: false,
      fileList: []
    }
  },
  watch: {
    attachFiles(newVal, oldVal) {
      this.fileList = []
      newVal.forEach(v => {
        this.fileList.push({
          id: v.id,
          fileName: v.fileName,
          blobName: v.blobName,
          blobContainerName: v.blobContainerName,
          name: v.fileName,
          url: process.env.VUE_APP_BLOB_RESOURCE + v.blobName
        })
      })
    }
  },
  created() {
    if (store.getters.token) {
      this.headers['authorization'] = 'Bearer ' + store.getters.token
    }
    if (store.getters.tenant) {
      this.headers['__tenant'] = store.getters.tenant
    }
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogTitle = file.name
      this.dialogVisible = true
    },
    handleExceed(files, fileList) {
      this.$message.warning(this.$t('BookStore2[\'Upload {0} files at one time\']', [this.limit]))
    },
    handleSuccess(response, file, fileList) {
      file.fileName = response.fileName
      file.blobName = response.blobName
      file.blobContainerName = response.blobContainerName
    },
    getAttachFiles() {
      const files = []
      this.$refs.upload.uploadFiles.forEach(file => {
        files.push({
          id: file.id,
          fileName: file.fileName,
          blobName: file.blobName,
          blobContainerName: file.blobContainerName
        })
      })
      return files
    }
  }
}
</script>

<style scoped>
/*.avatar-uploader .el-upload {*/
/*  border: 1px dashed #d9d9d9;*/
/*  border-radius: 6px;*/
/*  cursor: pointer;*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*}*/
/*.avatar-uploader .el-upload:hover {*/
/*  border-color: #409EFF;*/
/*}*/
/*.avatar-uploader-icon {*/
/*  font-size: 28px;*/
/*  color: #8c939d;*/
/*  width: 178px;*/
/*  height: 178px;*/
/*  line-height: 178px;*/
/*  text-align: center;*/
/*}*/
/*.avatar {*/
/*  width: 178px;*/
/*  height: 178px;*/
/*  display: block;*/
/*}*/
</style>
